<template>
    <view class="uni-section">
        <view class="uni-section-header" nvue>
            <view v-if="type" class="uni-section__head">
                <view :class="type" class="uni-section__head-tag"/>
            </view>
            <view class="uni-section__content">
                <text :class="{'distraction':!subTitle}" :style="{color:color}" class="uni-section__content-title">{{
                    title }}
                </text>
                <text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
            </view>
        </view>
        <view :style="{padding: padding ? '10px' : ''}">
            <slot/>
        </view>
    </view>
</template>

<script>

    /**
     * Section 标题栏
     * @description 标题栏
     * @property {String} type = [line|circle] 标题装饰类型
     *    @value line 竖线
     *    @value circle 圆形
     * @property {String} title 主标题
     * @property {String} subTitle 副标题
     */

    export default {
        name: 'UniSection',
        emits: ['click'],
        props: {
            type: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#333'
            },
            subTitle: {
                type: String,
                default: ''
            },
            padding: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {}
        },
        watch: {
            title(newVal) {
                if (uni.report && newVal !== '') {
                    uni.report('title', newVal)
                }
            }
        },
        methods: {
            onClick() {
                this.$emit('click')
            }
        }
    }
</script>
<style lang="scss">
    $uni-primary: #2979ff !default;

    .uni-section {
        background-color: #fff;
        // overflow: hidden;
        margin-top: 10px;
    }

    .uni-section-header {
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        padding: 12px 10px;
        // height: 50px;
        font-weight: normal;
    }

    .uni-section__head {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    .line {
        height: 12px;
        background-color: $uni-primary;
        border-radius: 10px;
        width: 4px;
    }

    .circle {
        width: 8px;
        height: 8px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        background-color: $uni-primary;
    }

    .uni-section__content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        flex: 1;
        color: #333;
    }

    .uni-section__content-title {
        font-size: 14px;
        color: $uni-primary;
    }

    .distraction {
        flex-direction: row;
        align-items: center;
    }

    .uni-section__content-sub {
        font-size: 12px;
        color: #999;
        line-height: 16px;
        margin-top: 2px;
    }
</style>
